<template>
	<view>
	<!-- 购物车没商品出现的页面 -->
		<view class="empty" v-if="show==false">
			<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309" mode="widthFix" style="width: 400rpx;"></image>
		<view class="empty-text">空空如也的购物</view>
		<view class="empty-button" @click="goshopping">去选购</view>
		</view>
		<!-- 购物车加购商品的东西 -->
		<view v-if="show==true">
			<scroll-view scroll-y="true" >
				
		
		<!-- 通过循环商品呈现出每个商品 --> 
			<view class="goods-detail" v-for="(item,index) in goods" :key="index">
				<view class="detail-left">
					<view class="goods-left">
					<!-- 商品的选择框 -->
						<checkbox-group @change="checkboxhange($event,item.goods_id)">
							<label>
								<checkbox  class="selected" color="#555555" :checked="item.ischeck"/>
							</label>
						</checkbox-group>
						  <image :src="item.goods_small_logo" mode="widthFix" style="width: 150rpx;"></image>
					</view>
					<view class="size">
					    <!-- <text style="font-size: 25rpx;">尺码：{{item.size}}</text> -->
					    <text class="goods-price">￥{{item.goods_price}}/件</text>
					</view>
				</view>
				<view class="detail-right">
					    <template>
					    	<view></view>
					    </template>
							<text class="subtract" @click="reduce(item)">-</text>
							<text class="num">{{item.goods_number}}</text>
							<text @tap="add(item)" class="add">+</text>
				</view>
			</view>
				</scroll-view>
		</view>
		<!-- 全选总计 -->
		<view class="end">
			<view class="end-left">
				<checkbox-group @change="selectgoods($event)">
					<label>
						<checkbox  :checked="allchecked" />全选
					</label>
				</checkbox-group>
				<view>
					总计：<text style="color: #f00;font-weight: bold;">￥ {{totalNumber}}</text>
				</view>
				</view>
				<view class="end-right" @click="pay">
				    结算({{totalPrice}})
				</view>		
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			//购物车有无商品
				show:true,
				//全选是否选中
				 allchecked:false,
				 checked:false,
				 checkList:[],
				    //商品
					goods:uni.getStorageSync("cart")||[],
					totalPrice: 0, //总价
					totalNumber:0// 总计
			}
		},
		methods:{
			add(item){
			// console.log(item)
			item.goods_number++
			this.setCart()
			},
			reduce(item){
				if(item.goods_number==1)  return 
				item.goods_number--
				// console.log(item.ischeck);
				this.setCart()
			},
			// 全选
			selectgoods(e){
	     	this.allchecked=!this.allchecked
			this.goods.forEach(item=>item.ischeck=this.allchecked)
			this.setCart()
			},
			// 反选
			checkboxhange(e,id){
				console.log(id);
				var temp =[]
				let index=this.goods.findIndex(item=>item.goods_id==id)
				console.log('index',index);
				// 选中状态取反
				this.goods[index].ischeck=!this.goods[index].ischeck
				
				temp=this.goods.every(item=>item.ischeck)
				console.log('temp',temp);
					if(temp){
						this.allchecked=true
					}else{
						this.allchecked=false
						
				}
				this.setCart()
			},
			// 计算总价
			setCart() { //计算总价
							let totalPrice = 0
							let totalNumber=0
							this.goods.forEach(v => {
								if (v.ischeck) {
									totalPrice += v.goods_price * v.goods_number
									totalNumber+=v.goods_number
								}
							})
							this.totalNumber=totalNumber
							this.totalPrice = totalPrice
							
						},
			pay(){
				uni.login({
				      success (res) {
				        console.log(res);
				        if (res.code) {
				          uni.request({
				            url: url,//后端的接口，把code传过去，然后后端请求获取用户信息
				            data: {
				              code: res.code,
				              user_name:e.nickName
				            },
				            success: (res) => {
				              console.log(res.data);
				              if(res.data.ret){
				                let userInfo = Object.assign(e,res.data)
				                uni.setStorage({
				                  key:"userInfo",
				                  data:JSON.stringify(userInfo) 
				                })
				                uni.hideLoading()
				                uni.stopPullDownRefresh()
				              }else{
				                uni.showToast({title: '登录失败',icon:'error',duration:2000})
				                uni.hideLoading()
				                uni.stopPullDownRefresh()
				              }
				            }
				          })
				          
				        } else {
				          console.log('登录失败！' + res.errMsg)
				        }
				      }
				    })

			}
		},
		onshow(){
			this.goods=uni.getStorageSync("cart")||[]
		},
		onLoad(){
			uni.hideTabBar()
		},
		
		computed:{}
		}
	</script>	


<style lang="scss">
	.goods{
		line-height: 80rpx;
		background-color: #FFFFFF;
		&-detail{
		    display: flex;
		    padding: 30rpx 15rpx 30rpx 30rpx;
		    background-color: #fff;
		    justify-content: space-between;
		    border-bottom: 5rpx solid #F1F1F1;
		    align-items: center;
		    .detail-left{
		        display: flex;
		        .goods-left{
		            display: flex;
		            align-items: center;
		        }
		    }
		    .size{
		        display: flex;
		        justify-content: space-around;
		        flex-direction: column;
		        margin-left: 30rpx;
		        .goods-price{
		            font-size: 25rpx;
		            color: #F44545;
		            
		        }
		    }
		    .detail-right{
		        text{
		            width: 50rpx;
		            line-height: 50rpx;
		            text-align: center;
		            display: inline-block;
		            background-color: #F7F7F7;
		            margin-right: 10rpx;
		        }
		        .add {
		            color: #FA4305;
		            border-radius: 10rpx 30rpx 30rpx 10rpx;
		            margin-right: 20rpx;
		        }
		        .subtract{
		            border-radius: 30rpx 10rpx 10rpx 30rpx;
		        }
		    }
		}
	}
	.empty{
		
		    position: relative;
		    top: 220rpx;
		    text-align: center;
		    display: flex;
		    align-items: center;
		    flex-direction: column;
		    &-text{
		        color: #808080;
		        margin-bottom: 50rpx;
		    }
		    &-button{
		        width: 300rpx;
		        height: 90rpx;
		        color:orange;
		        border: 1rpx solid orange;
		        text-align: center;
		        line-height: 90rpx;
		        border-radius: 48rpx;
		    }		
	}
	.end{
	    width: 100%;
	    height: 90rpx;
	    background-color:#fff;
	    position: fixed;
	    bottom: 0rpx;
	    left: 0;
	    display: flex;
	    align-items: center;
	    &-left{
	        width: 70%;
	        display: flex;
	        justify-content: space-between;
	        padding: 0 30rpx;
	        .end-flex{
	            display: flex;
	            align-items: center;
	        }
	    }
	    &-right{
	        width: 30%;
	        line-height: 90rpx;
	        background-color: #F44545;
	        text-align: center;
	        color: #fff;
	    }
	}
</style>

